<template>
    <el-form ref="actionform" :model="formData" label-width="80px" v-loading="showLoading">
		<el-form-item label="话题类型" verify prop="topicType">
			<el-select v-model="formData.topicType" placeholder="请选择话题类型" class="formItem">
				<el-option
					v-for="item in topicTypeList"
					:key="item.labelId"
					:label="item.labelText"
					:value="item.labelId">
				</el-option>
			</el-select>
        </el-form-item>
		<el-form-item label="话题名称" verify prop="topicName">
			<el-input class="formItem" v-model="formData.topicName" placeholder="请输入话题名称"></el-input>
		</el-form-item>
		<el-form-item label="话题描述" verify prop="medalDesc">
			<el-input
				class="formItem"
				type="textarea"
				:autosize="{ minRows: 2, maxRows: 4}"
				v-model="formData.medalDesc"
				placeholder="请输入话题描述">
			</el-input>
		</el-form-item>

		<!-- <el-form-item label="获得途径" verify prop="medalGetActionParam" v-if="formData.topicType === 2">
			<el-select v-model="formData.medalGetActionParam" multiple collapse-tags placeholder="请选择勋章获得条件" class="formItem">
				<el-option
					v-for="item in medalDataList"
					:key="item.medalUid"
					:label="item.topicName + ' ('+ getTypes(item.topicType) + ')'"
					:value="item.medalUid"></el-option>
			</el-select>
		</el-form-item> -->

		<el-form-item label="编辑内容" prop="content">
			
		</el-form-item>
		<!-- <el-form-item label="勋章(亮)" prop="medalImageUrlOn" verify>
			<el-upload
				:action="uploadUrl"
				:data="access_token"
				:show-file-list="false"
				:before-upload="$util.beforeUpload"
				:on-success="(res, file, fileList) => uploadMedalImageSuccess(res, file, fileList, 'medalImageUrlOn')"
			>
				<el-image :src="formData.medalImageUrlOn" class="avatar" v-if="formData.medalImageUrlOn" />
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				<el-input class="inputs none imgArea" v-model="formData.medalImageUrlOn"></el-input>
			</el-upload>
		</el-form-item> -->
		<el-form-item style="margin-bottom: 0">
			<p class="flex-center margin_top_30">
				<el-button type="primary" @click="handlePost">确  认</el-button>
				<el-button @click="closeDialog">取  消</el-button>
			</p>
		</el-form-item>
	</el-form>
</template>

<script>
    import {
		addMedal,
		editMedal
    } from "@/api/table";

    export default {
        name: "TOPIC_ACTION",
        components: {},
        props: {
            infoData: {
            	type: Object,
                default: {}
			},
			topicTypeList: {
				type: Array,
                default: []
			},
		},
        data() {
            return {
				formData: {},
				showLoading: false,                
				access_token: {
                    access_token: this.$store.getters.token
                },
				uploadUrl: process.env[this.$base] + "/medias/image/upload",
            }
        },
      	methods: {
			updateData() {
				let medalGetActionParam = [];
				if (this.infoData.medalGetActionParam) {
					medalGetActionParam = this.infoData.medalGetActionParam.split(',')
				}
				this.formData = {...this.infoData, medalGetActionParam};
			},

			// 获取话题类型
            getTypes(topicType) {
                const info = this.topicTypeList.find(item => item.labelId === topicType) || {}
                return info.labelText || ''
            },

			// 话题图
			uploadMedalImageSuccess(response, file, fileList, imageType) {
				if (response.code == "200") {
					const { fileUrl, fileUid } = response.data;
					this.$set(this.formData, imageType, fileUrl);
				}
			},

			// 确认
			handlePost() {
				const medalGetActionParam =
					this.formData.medalGetActionParam
					? this.formData.medalGetActionParam.toString()
					: null;
				const postData = {
					...this.formData,
					medalGetActionParam
				};
				this.$refs.actionform.validate(valid => {
					if (valid) {
						this.showLoading = true;
						// 编辑
						if (postData.medalUid) {
							editMedal(postData).then(res => {
								if (res.data.isSuccessful !== "Y") {
									this.$message.error(res.data.message);
									return
								}
								this.$message({
									message: "编辑成功！",
									type: "success"
								});
								setTimeout(() => {
									this.closeDialog(true);
								}, 0);
							}).finally(() => {
								this.showLoading = false;
							});
							return
						}

						// 新增
						addMedal(postData).then(res => {
							if (res.data.isSuccessful !== "Y") {
								this.$message.error(res.data.message);
								return
							}
							this.$message({
								message: "新增成功！",
								type: "success"
							});
							setTimeout(() => {
								this.closeDialog(true);
							}, 0);
						}).finally(() => {
							this.showLoading = false;
						});
					}
				})
			},

			closeDialog(refresh = false, type = ''){
				this.formData = {};
				this.$emit('func', {
					action: false,
					refresh,
					type
				})
			}
      	},
  	}
</script>
<style lang="scss" scoped>
	.formItem {
		width: 360px;
    }
</style>

